import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import GlobalNav from '@/components/base/GlobalNav';
import Footer from '@/components/base/Footer';
import './detail.scss';
class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      u_name:'',
      list: []
    }
  }

  componentDidMount () {
    const fid = this.props.match.params.id;
    fetch(`https://sun.daxunxun.com/api/food/detail?f_id=`+fid)
    .then(res => res.json())
    .then(data => {
      // console.log(data[0])
      this.setState({
        list: data
      })
    })

    let f_type = '月度最佳';
    let type = JSON.stringify(f_type)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+type)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        dat: data
      })
    })
  }
  collect (fid) {
    // 从本地存储里面获取用户信息
    let uidt = JSON.parse(localStorage.getItem('uid'))
    let username = JSON.parse(localStorage.getItem('username'))  
    let names = JSON.parse(localStorage.getItem('names'))  
    console.log(fid, uidt, username, names )
      let content = {
        "uid": uidt,
        "username": username,
        "f_id": fid
      }
      fetch('https://sun.daxunxun.com/api/collect/add',
        {
          method: 'post',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(content)
        }
      )
      .then(res => res.json())
      .then(data => {
        console.log(data)
        let msg = data.message
        alert(msg)
      })
  }

  goDetail (f_id){
    this.props.history.push('/detail/' + f_id)
    this.props.history.go()
  }
  goUsers (uname) {
    this.props.history.push('/users/'+ uname)
    localStorage.setItem('u_name', JSON.stringify(uname))
  }
  render () {
    let list = this.state.list;
    let arr =[];
    let top =[];
    for(var i in list) {
      let fid = list[i].f_id
      // console.log(list[i].ingredient,list[i].weight)
      // 食材和用料的数据
      let ingredient = []
      let weight = []
      let content = []
      let imgs = []
      let arrList1 = list[i].ingredient
      let arrList2 = list[i].weight
      let arrList3 = list[i].content
      let arrList4 = list[i].imgUrl
      for(var j in arrList1) {
        ingredient.push(<li key={arrList1[j].index}>{arrList1[j]}</li>)
      }
      for(var m in arrList2) {
        weight.push(<li key={arrList2[m].index}>{arrList2[m]}</li>)
      }
      for(var k in arrList3) {
        content.push(<li key={arrList3[k].index}><span className="iconfont icon-jiantouxiajiang"></span>{arrList3[k]}</li>)
      }
      for(var g in arrList4) {
        imgs.push(<li key={arrList4[g].index}><img src={ arrList4[g] }  alt=""/></li>)
      }
      // 头部导航的名字
      let uname = list[i].u_name
      top.push (<span key={list[i].f_id}>{list[i].name}</span>)
      // 内容块
      arr.push (
        <div className="detail-left" key={list[i].f_id}>
          <h1>{ list[i].name }<span>独家</span></h1>
          <div className="detail-left-show">
            <div className="detail-show-img">  
              <img src={list[i].banner} alt="" width="660" itemProp="image"/>
            </div>
            <div className="detail-img-center">
              <div className="img-center-left"><span>{ list[i].score }</span>综合评分<span>{ list[i].number }</span>人做过这道菜</div>
              <div className="img-center-right" onClick={ this.collect.bind(this, fid)}><span>收藏</span></div>
            </div>
            <div className="detail-user" onClick={ this.goUsers.bind(this,uname)}>
              <Link to="" className="user-a"><div className="userImg"></div><h2>{ list[i].u_name }</h2></Link>
            </div>
            <div className="detail-desc">
              好东西要分享~  这道菜的详细步骤如下，跟我一起来学习这道菜吧~~
            </div>
            <h2> 用料</h2>
            <div className="detail-list">
              <ul>
                { ingredient }
              </ul>
              <ul>
                { weight }
              </ul>
            </div>
            <h1>{ list[i].name }</h1>
            <div className="detail-practive">
              <ul className="content-list">
                { content }
              </ul>
              <ul className="img-list">
                { imgs }
              </ul>
            </div>
          </div>
        </div>
      )
    }

    // 右侧相关提示
    let right = this.state.dat;
    let rightList = [];
    for(let i in right) {
      let f_id = right[i].f_id
      rightList.push (
        <li onClick={this.goDetail.bind(this, f_id)}>
        <div className="img">
          <img src={ right[i].banner } alt=""/>
        </div>
          <p className="detail-ellipsis">{ right[i].name }</p>
        </li>
      )
    }
    return (
      <div className = "container">
        <div className="header">
          <GlobalNav { ...this.props}/>
         </div>
        <div className="section">
          <div className="detail-nav">
            <Link to="/home">首页</Link><span className="iconfont icon-jiantou3"></span>
            <Link to="/menu">菜谱</Link><span className="iconfont icon-jiantou3"></span>
            {/* 导航处菜名 */}
            { top }
          </div>
          <div className="detail-container">
          {/* 循环出来的做菜步骤 */}
            { arr }
            <div className="detail-right">
            <div className="detail-right1"></div>
            <div className="detail-right-top">
              <span>被大家加入到以下菜单</span>
              <span><a href="/">全部</a></span>
            </div>
            <div className="detail-list-desc">
              <ul>
                { rightList }
              </ul>
             </div>
              <p className="detail-right-join">还没有菜单推荐这个菜谱<Link to="/mine/menu">+&nbsp;加入菜单</Link></p>
              
            </div>
          </div>
        </div>
        <div className="foot">
          <Footer />
        </div>
      </div>
    )
  }
}

export default Com;
